<template>
  <div id="comment">
    <el-row class="comment-container">
      <!-- 用户头像 -->
      <el-col :span="2">
        <el-avatar :size="44" :src="comment.avatar" />
      </el-col>

      <!-- 评论内容区域 -->
      <el-col :span="22">
        <div class="comment-bubble">
          <!-- 用户名 -->
          <el-row>
            <span class="user-name">{{ comment.userName }}</span>
          </el-row>

          <!-- 评论内容 -->
          <el-row>
            <p class="comment-content">{{ comment.content }}</p>
          </el-row>

          <!-- 时间 + 回复 -->
          <el-row class="comment-meta">
            <span>{{ comment.commentDate }}</span>
            <span class="reply-btn" @click="showReplyBox = !showReplyBox">回复</span>
          </el-row>

          <!-- 查看回复 -->
          <el-row v-if="!showRecovers" class="view-reply">
            <span>
              共 1 条回复，点击
              <span class="view-reply-btn" @click="showRecovers = true">查看</span>
            </span>
          </el-row>

          <!-- 回复内容 -->
          <div v-if="showRecovers" class="recover-section">
            <!-- <recover-section :top-id="comment.id" /> -->
            <reply-section :top-id="comment.id" />
          </div>

          <!-- 回复输入框 -->
          <div v-if="showReplyBox" class="reply-box-area">
            <reply-box :topId="comment.id" :articleId="props.articleId" />
          </div>
        </div>

        <!-- 分割线 -->
        <el-divider border-style="dotted" />
      </el-col>
    </el-row>
  </div>
</template>

<script setup lang="ts">
import type { ArticleTopComment } from '@/utils/dataType/ArticleModel'
import ReplySection from '@/components/comment/ReplySection.vue'
import ReplyBox from '@/components/comment/ReplyBox.vue'
import { ref, type PropType } from 'vue'

const props = defineProps({
  comment: {
    type: Object as PropType<ArticleTopComment>,
    required: true,
  },
  articleId: {
    type: Number,
    required: true,
  },
})
const showRecovers = ref(false)
const showReplyBox = ref(false)
const comment = props.comment
</script>

<style scoped>
.comment-container {
  padding: 10px 0;
}

.comment-bubble {
  background: #f9f9fc;
  padding: 12px 16px;
  border-radius: 12px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.user-name {
  font-weight: bold;
  color: #ff6699;
  font-size: 15px;
}

.comment-content {
  font-size: 14px;
  color: #333;
  line-height: 1.6;
  margin: 4px 0;
}

.comment-meta {
  font-size: 13px;
  color: #888;
  display: flex;
  gap: 20px;
  margin-top: 4px;
}

.reply-btn {
  cursor: pointer;
  color: #409eff;
}

.reply-btn:hover {
  text-decoration: underline;
}

.view-reply {
  margin-top: 6px;
  font-size: 13px;
  color: #999;
}

.view-reply-btn {
  color: #409eff;
  cursor: pointer;
}

.view-reply-btn:hover {
  text-decoration: underline;
}

.recover-section {
  margin-top: 8px;
  padding-left: 10px;
  border-left: 2px solid #eee;
}

.reply-box-area {
  margin-top: 8px;
}
</style>
